<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控面板</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        #app {
            display: grid;
            grid-gap: 20px;
            max-width: 1200px;
            margin: auto;
        }
        .info-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        .card {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .card h3 {
            margin: 0 0 10px 0;
            color: #666;
            font-size: 16px;
        }
        .card p {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }
        .chart-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body>

<div id="app">
    <div class="info-cards">
        <div class="card">
            <h3>CPU核心</h3>
            <p>{{ systemInfo.cpuCores }} 核</p>
        </div>
        <div class="card">
            <h3>总内存</h3>
            <p>{{ systemInfo.totalMemory }} GB</p>
        </div>
        <div class="card">
            <h3>稳定运行</h3>
            <p>{{ uptime }}</p>
        </div>
    </div>

    <div class="info-cards">
        <div class="chart-container" id="cpu-chart" style="height:400px;"></div>
        <div class="chart-container" id="memory-chart" style="height:400px;"></div>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, computed } = Vue

    createApp({
        setup() {
            // 静态系统信息
            const systemInfo = {
                cpuCores: 8,
                totalMemory: 16
            };

            // 动态系统运行时间
            const startTime = new Date().getTime() - 10897320000; // 模拟已运行时间
            const uptime = ref('');

            const updateUptime = () => {
                const now = new Date().getTime();
                let delta = Math.floor((now - startTime) / 1000);
                const days = Math.floor(delta / 86400);
                delta -= days * 86400;
                const hours = Math.floor(delta / 3600) % 24;
                delta -= hours * 3600;
                const minutes = Math.floor(delta / 60) % 60;
                uptime.value = `${days}天 ${hours}小时 ${minutes}分钟`;
            };

            // 实时使用率数据
            const cpuUsage = ref(25);
            const memoryUsage = ref(45);

            let cpuChart = null;
            let memoryChart = null;

            const gaugeOption = (title, value) => ({
                series: [{
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    progress: { show: true, width: 30 },
                    pointer: { show: false },
                    axisLine: { lineStyle: { width: 30 } },
                    axisTick: { distance: -45, length: 10, lineStyle: { width: 2, color: '#999' } },
                    splitLine: { distance: -52, length: 14, lineStyle: { width: 3, color: '#999' } },
                    axisLabel: { distance: -20, color: '#999', fontSize: 16 },
                    anchor: { show: false },
                    title: { show: true, offsetCenter: [0, '80%'], fontSize: 20 },
                    detail: { valueAnimation: true, fontSize: 30, offsetCenter: [0, '0%'] },
                    data: [{ value: value, name: title }]
                }]
            });

            // 模拟数据更新
            const simulateData = () => {
                cpuUsage.value = +(Math.random() * 60 + 10).toFixed(2);
                memoryUsage.value = +(Math.random() * 30 + 40).toFixed(2);

                // 更新图表
                if (cpuChart) {
                    cpuChart.setOption({ series: [{ data: [{ value: cpuUsage.value, name: 'CPU 使用率' }] }] });
                }
                if (memoryChart) {
                    memoryChart.setOption({ series: [{ data: [{ value: memoryUsage.value, name: '内存使用率' }] }] });
                }
            };

            // Vue生命周期钩子，在组件挂载后执行
            onMounted(() => {
                // 初始化图表
                cpuChart = echarts.init(document.getElementById('cpu-chart'));
                memoryChart = echarts.init(document.getElementById('memory-chart'));

                cpuChart.setOption(gaugeOption('CPU 使用率', cpuUsage.value));
                memoryChart.setOption(gaugeOption('内存使用率', memoryUsage.value));

                // 启动定时器
                updateUptime();
                setInterval(updateUptime, 60000); // 每分钟更新运行时间
                setInterval(simulateData, 2000); // 每2秒更新使用率

                window.addEventListener('resize', () => {
                    cpuChart.resize();
                    memoryChart.resize();
                });
            });

            return {
                systemInfo,
                uptime,
                cpuUsage,
                memoryUsage
            };
        }
    }).mount('#app');
</script>

</body>
</html>